<!--
 * @FileDescription: 角色管理抽屉组件 - 提供角色新增/编辑功能
 * @Author: [开发者姓名]
 * @Date: 2025-04-23
 * @LastEditors: [最后更新者]
 * @LastEditTime: 2025-04-23
 -->

 <script setup lang="ts">
 // 组合式API引入
 import { computed, ref, watch } from 'vue';
 // 自定义Hook引入
 import { useBoolean } from '@sa/hooks';
 import { useForm, useFormRules } from '@/hooks/common/form';
 import { $t } from '@/locales';
 // 常量定义
 import { enableStatusOptions } from '@/constants/business';
 // 子组件引入
 import MenuAuthModal from './menu-auth-modal.vue';
 import ButtonAuthModal from './button-auth-modal.vue';
 
 // 服务层API
 import { fetchGetRoleInsert } from '@/service/api/system-manage'; 
 
 // 组件定义（符合Element Plus规范）
 defineOptions({ name: 'RoleOperateDrawer' });
 
 /**
  * @description: 组件Props类型定义
  * @prop {UI.TableOperateType} operateType - 操作类型（add/edit）
  * @prop {Api.SystemManage.Role} [rowData] - 编辑时的行数据
  */
 interface Props {
   operateType: UI.TableOperateType;
   rowData?: Api.SystemManage.Role | null;
 }
 
 const props = defineProps<Props>();
 
 /**
  * @description: 组件事件定义
  * @emits submitted - 提交成功事件
  */
 interface Emits {
   (e: 'submitted'): void;
 }
 const emit = defineEmits<Emits>();
 
 // 抽屉可见性控制（使用v-model语法）
 const visible = defineModel<boolean>('visible', {
   default: false
 });
 
 // 表单相关Hook（参考Element Plus表单验证规范）
 const { formRef, validate, restoreValidation } = useForm();
 const { defaultRequiredRule } = useFormRules();
 
 // 权限弹窗状态管理
 const { bool: menuAuthVisible, setTrue: openMenuAuthModal } = useBoolean();
 const { bool: buttonAuthVisible, setTrue: openButtonAuthModal } = useBoolean();
 
 // 计算属性：根据操作类型显示不同标题
 const title = computed(() => {
   const titles: Record<UI.TableOperateType, string> = {
     add: $t('page.manage.role.addRole'),
     edit: $t('page.manage.role.editRole')
   };
   return titles[props.operateType];
 });
 
 /**
  * @description: 表单数据类型定义
  * @typedef {Object} Model
  * @property {string} roleName - 角色名称
  * @property {string} roleCode - 角色编码
  * @property {string} [roleDesc] - 角色描述（可选）
  * @property {number} [status] - 启用状态
  */
 type Model = Pick<Api.SystemManage.Role, 'roleName' | 'roleCode' | 'roleDesc' | 'status'>;
 
 // 响应式表单模型
 const model = ref(createDefaultModel());
 
 /**
  * @description: 创建默认表单模型
  * @return {Model} 初始化后的表单对象
  */
 function createDefaultModel(): Model {
   return {
     roleName: '',
     roleCode: '',
     roleDesc: '',
     status: undefined
   };
 }
 
 // 表单验证规则（符合Element Plus规则格式）
 type RuleKey = Exclude<keyof Model, 'roleDesc'>;
 const rules: Record<RuleKey, App.Global.FormRule> = {
   roleName: defaultRequiredRule,
   roleCode: defaultRequiredRule,
   status: defaultRequiredRule
 };
 
 // 计算属性：当前角色ID（编辑模式使用）
 const roleId = computed(() => props.rowData?.id || -1);
 
 // 计算属性：是否编辑模式
 const isEdit = computed(() => props.operateType === 'edit');
 
 /**
  * @description: 初始化表单模型
  * @return {void}
  */
 function handleInitModel() {
   model.value = createDefaultModel();
   if (props.operateType === 'edit' && props.rowData) {
     Object.assign(model.value, props.rowData);
   }
 }
 
 /**
  * @description: 关闭抽屉
  * @return {void}
  */
 function closeDrawer() {
   visible.value = false;
 }
 
 /**
  * @description: 表单提交处理
  * @return {Promise<void>}
  * @throws {Error} 表单验证失败时抛出异常
  */
 async function handleSubmit() {
   try {
     await validate(); // 执行Element Plus表单验证
     
     // 构建提交参数（根据API文档定义）
     const params = {
       ...model.value,
       id: isEdit.value ? roleId.value : undefined
     };
     
     // 调用服务层API
     await fetchGetRoleInsert(params);
     
     // 成功处理
     window.$message?.success($t('common.updateSuccess'));
     closeDrawer();
     emit('submitted'); // 触发父组件更新
   } catch (error) {
     console.error('提交失败:', error);
     // FIXME: 需要添加更详细的错误处理逻辑
   }
 }
 
 // 监听抽屉可见性变化（初始化表单）
 watch(visible, (newVal) => {
   if (newVal) {
     handleInitModel();
     restoreValidation(); // 重置验证状态
   }
 });
 </script>
 
 <template>
   <!-- Element Plus抽屉组件 -->
   <ElDrawer v-model="visible" :title="title" :size="360">
     <!-- 表单区域（使用Element Plus布局） -->
     <ElForm ref="formRef" :model="model" :rules="rules" label-position="top">
       <!-- 角色名称表单项 -->
       <ElFormItem :label="$t('page.manage.role.roleName')" prop="roleName">
         <ElInput 
           v-model="model.roleName" 
           :placeholder="$t('page.manage.role.form.roleName')" 
         />
       </ElFormItem>
       
       <!-- 角色编码表单项 -->
       <ElFormItem :label="$t('page.manage.role.roleCode')" prop="roleCode">
         <ElInput 
           v-model="model.roleCode" 
           :placeholder="$t('page.manage.role.form.roleCode')" 
         />
       </ElFormItem>
       
       <!-- 状态选择 -->
       <ElFormItem :label="$t('page.manage.role.roleStatus')" prop="status">
         <ElRadioGroup v-model="model.status">
           <ElRadio 
             v-for="{ label, value } in enableStatusOptions" 
             :key="value" 
             :value="value" 
             :label="$t(label)" 
           />
         </ElRadioGroup>
       </ElFormItem>
       
       <!-- 角色描述 -->
       <ElFormItem :label="$t('page.manage.role.roleDesc')" prop="roleDesc">
         <ElInput 
           v-model="model.roleDesc" 
           :placeholder="$t('page.manage.role.form.roleDesc')" 
         />
       </ElFormItem>
     </ElForm>
 
     <!-- 权限管理区域（仅编辑模式显示） -->
     <ElSpace v-if="isEdit">
       <ElButton @click="openMenuAuthModal">
         {{ $t('page.manage.role.menuAuth') }}
       </ElButton>
       <MenuAuthModal v-model:visible="menuAuthVisible" :role-id="roleId" />
       
       <ElButton @click="openButtonAuthModal">
         {{ $t('page.manage.role.buttonAuth') }}
       </ElButton>
       <ButtonAuthModal v-model:visible="buttonAuthVisible" :role-id="roleId" />
     </ElSpace>
 
     <!-- 抽屉底部操作按钮 -->
     <template #footer>
       <ElSpace :size="16">
         <ElButton @click="closeDrawer">{{ $t('common.cancel') }}</ElButton>
         <ElButton type="primary" @click="handleSubmit">
           {{ $t('common.confirm') }}
         </ElButton>
       </ElSpace>
     </template>
   </ElDrawer>
 </template>
 
 <!-- TODO: 需要添加样式优化 -->
 <style scoped></style>